@extends('public.base')
@section('body')
<style>
    .layui-unselect dl {
        max-height: 160px;
    }

    html {
        background-color: #fff;
    }
</style>

<div class="layui-row">
    <form id="main_form" class="layui-form layui-form-pane" action="" method="post" lay-filter="main-form-group">
        <!-- ==================================  隐藏区  ================================== -->
        <!-- ==================================  隐藏区  ================================== -->
        <input type="hidden" name="id" value="">

        <div class="layui-card">
            <div class="layui-card-body">
                <div class="layui-tab layui-tab-card" lay-filter="tab_form">
                    <ul class="layui-tab-title">
                        <li class="layui-this">基本设置</li>
                        <li>活动内容</li>
                    </ul>
                    <div class="layui-tab-content">

                        <div class="layui-tab-item layui-show">

                            <div class="layui-form-item">
                                <label class="layui-form-label">排序</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="list_order" value="50" lay-verify="required|number"
                                           lay-verType="tips"
                                           autocomplete="off" class="layui-input">
                                </div>
                                <div class="layui-form-mid layui-word-aux">升序 数字越小越靠前</div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">商家名称</label>
                                <div class="layui-input-block">
                                    <input type="text" name="stroe_name" lay-verify="required" autocomplete="off"
                                           placeholder="请输入商家名称"
                                           class="layui-input" value="">
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <label class="layui-form-label">分类id</label>
                                <div class="layui-input-block">
                                    <select  name="class">
                                        <option value="">请选择分类</option>

                                        @foreach($tree as $k=>$v)
                                            <option value="{{$v['id']}}">{!!$v['title_show']!!}</option>
                                        @endforeach

                                    </select>
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <label class="layui-form-label">电话</label>
                                <div class="layui-input-block">
                                    <input type="text" name="tel" lay-verify="required" autocomplete="off"
                                           placeholder="请输入标题"
                                           class="layui-input" value="">
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <div class="layui-input-inline" style="width: 260px;">
                                    <label class="layui-form-label">省份</label>
                                    <div class="layui-input-block">
                                        <select  name="country" class="province_select"  lay-filter="country">
                                            <option value="">请选择省</option>
                                            @foreach($areaList  as $k=>$v)
                                                <option value="{{$v['area_id']}}">{{$v['title']}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="layui-input-inline" style="width: 260px;">
                                    <label class="layui-form-label">市</label>
                                    <div class="layui-input-block" >
                                        <select  name="city" id="city_id" lay-filter="city">
                                            <option value="">选择市</option>
                                            <option value="{{$data->city}}" selected>{{$data->city_name}}</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="layui-input-inline" style="width: 260px;">
                                    <label class="layui-form-label">区</label>
                                    <div class="layui-input-block">
                                        <select  name="region" class="region_id" id="region_id">
                                            <option value="">选择县/区</option>
                                            <option value="{{$data->region}}" selected>{{$data->region_name}}</option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <label class="layui-form-label">地址</label>
                                <div class="layui-input-block">
                                    <input type="text" name="addr" lay-verify="required" autocomplete="off"
                                           placeholder="请输入标题"
                                           class="layui-input" value="">
                                </div>
                            </div>


                            <div class="layui-form-item">
                                <div class="layui-input-inline" style="width: 220px;">
                                    <label class="layui-form-label">经度</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="longitude" lay-verify="required" autocomplete="off"
                                               placeholder="经度"
                                               class="layui-input" value="" id="longitude">
                                    </div>
                                </div>
                                <div class="layui-input-inline" style="width: 220px;">
                                    <label class="layui-form-label">纬度</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="latitude" lay-verify="required" autocomplete="off"
                                               placeholder="纬度"
                                               class="layui-input" value="" id="latitude">
                                    </div>
                                </div>
                                <div class="layui-input-inline" style="width: 220px;">
                                    <button type="button" class="layui-btn layui-btn-primary"
                                            id="parent_select">
                                        选择地图经纬度
                                    </button>
                                </div>

                            </div>


                        </div>

                        <!-- 第二个选项卡内容 -->
                        <div class="layui-tab-item">
                            <div class="layui-form-item">
                                <div class="layui-form-item layui-form-text">
                                    <textarea id="memo" name="remark" class="layui-textarea"
                                              style="height: 350px;width:100%;"></textarea>
                                </div>
                            </div>
                        </div>


                    </div>
                </div>

                <!-- 按钮区 -->
                <div class="layui-form-item layui-layout-admin">
                    <div class="layui-input-block">

                        <div class="layui-footer" style="left: 0;">
                            <button id="form_save" lay-filter="form_save" class="layui-btn"
                                    lay-submit="">
                                保存
                            </button>
                            <button id="form_reset" type="button" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                </div>
    </form>
</div>
<script src="{{ADMIN_PATH}}layui/layuiadmin/layui/layui.js"></script>
<script src="{{ADMIN_PATH}}js/admin.common.js"></script>
<link rel="stylesheet" href="{{ADMIN_PATH}}kindeditor/themes/default/default.css" media="all">
<script src="{{ADMIN_PATH}}kindeditor/kindeditor.js?{{time()}}"></script>
<script src="{{ADMIN_PATH}}ztree/js/jquery-1.4.4.min.js"></script>
<script>

    //========================================== 说明区 ==========================================
    //注意：选项卡tab 依赖 element 模块，否则无法进行功能性操作

    // ==========================  公共变量区  ========================================
    var form_id = 'main_form';
    var save_url =  '{{url('admin/freebird/store/edit')}}';
    var up_url = '{{url('public/upload/pic')}}';

    var select_menu_url='{{url('admin/freebird/store/map')}}';  //地图经纬度

    // ==========================  全局函数区  ===========================================
    //默认函数，重载当前页面数据，1、页面初始化 2、配合搜索 3、配合post_data等操作的回调，如：编辑或删除完表格的记录后，刷新当前页面等
    function reload_data() {
        layui.use(['table'], function () {
            var table = layui.table;
            table.reload('grid');
        });
    }


    // ==============================  业务处理  ==============================================
    layui.use(['element', 'form'], function () {
        //========================================== layui引用区 ==========================================
        var $ = layui.$
            , form = layui.form
        ;


        form.on('select(country)', function(data){
            var pid = data.value;
            $("#city_id").html('<option value="">请选择</option>');
            $("#region_id").html('<option value="">请选择</option>');

            var s = '<option value="">请选择</option>';
            $.ajax({
                type: 'POST',
                url: '{{url('/public/area/list')}}',
                data: {pid: pid},
                async: false,
                dataType: 'json',
                success: function (data) {
                    if (data.status == 200) {
                        $.each(data.data, function (i, n) {

                            var option1 = $("<option>").val(n.area_id).text(n.title);
                            $("#city_id").append(option1);
                            form.render('select');
                            //s += '<option value="' + n.area_id + '">' + n.title + '</option>';
                        });
                        // $("#city_id").html(s);
                    } else {
                        $("#city_id").html('<option value="">请选择</option>');
                        $("#region_id").html('<option value="">请选择</option>');
                    }

                }
            });

        });


        form.on('select(city)', function(data){
            var pid = data.value;
            // $("#city_id").html('<option value="">请选择</option>');
            $("#region_id").html('<option value="">请选择</option>');

            var s = '<option value="">请选择</option>';
            $.ajax({
                type: 'POST',
                url: '{{url('/public/area/list')}}',
                data: {pid: pid},
                async: false,
                dataType: 'json',
                success: function (data) {
                    console.log(1111);
                    if (data.status == 200) {
                        console.log(1111);
                        $.each(data.data, function (i, n) {
                            console.log(n.area_id+'----'+n.title);
                            var option1 = $("<option>").val(n.area_id).text(n.title);
                            $("#region_id").append(option1);
                            form.render('select');
                            //s += '<option value="' + n.area_id + '">' + n.title + '</option>';
                        });
                        console.log(3333);
                        // $("#city_id").html(s);
                    } else {
                        //  $("#city_id").html('<option value="">请选择</option>');
                        $("#region_id").html('<option value="">请选择</option>');
                    }

                }
            });

        });


        //＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝选择地图经纬度========================
        $('#parent_select').click(function () {
            var index = layer.open({
                type: 2
                , title: '选择经纬度'
                , content: select_menu_url
                , area: ['620px', '450px'] //宽高
                , scrollbar: false
                //, shadeClose: true //点击浮层关闭
                , yes: function (index, layero) {
                    //按钮【按钮一】的回调
                    //先获取子页面的body对象
                    var iframe_body = layer.getChildFrame('body', index);
                    var select_menu_id_value = iframe_body.find('input[name="select_menu_id"]').val();
                    if (select_menu_id_value > 0) {
                        $('#pid').val(select_menu_id_value);
                        $('#pname').val(iframe_body.find('input[name="select_menu_name"]').val());
                    } else {
                        show_warn('您未选择任何菜单');
                    }
                    layer.close(index);
                }
                , btn2: function (index, layero) {
                    //按钮【按钮二】的回调
                    //return false 开启该代码可禁止点击该按钮关闭
                    show_warn('您未选择任何菜单');
                }
            });
        });
        //========================================== 页面初始化 ==========================================
        //1、初始化form值:1、后台传来的数据
        var data = JSON.stringify({!!$data!!});
        json_to_form(data, form_id);

        //2、初始化编辑器，需要在 初始化form后面，因为editor要调隐藏域的内容
        var editor = create_editor('memo');

        //========================================== 数据提交、元素事件绑定区 ==========================================

        /* 监听提交 */
        form.on('submit(form_save)', function(data){
            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
            $.post(save_url, data.field, function (res) {
                try {
                    if(res.status==200) {
                        //重新刷新父窗口的数据区
                        parent.layui.table.reload('main_table'); //重载表格
                        parent.layer.close(index); //再执行关闭
                    }else{
                        layer.msg(res.message);
                    }
                } catch (e) {
                    layer.msg("异常");
                }

            }, "json");

            return false;
        });

        //2、表单重置
        $('#form_reset').click(function () {
            /* 因为1、通过json赋值 2、layui需要重新渲染form的一些组件 3、有页面会集成kindeditor ，所以重置表单通过刷新浏览器实现最简便 */
            layer.confirm('确定重载表单吗？', function (index) {
                //1、选择确定后执行的操作
                window.location.reload();

                //2、

                //99、关闭自身窗口，请放在函数内部最后一行
                layer.close(index);

            });
        });

        //========================================== 渲染区 ==========================================
        //表单重新渲染，请保存到最后一行
        //渲染表单
        form.render();

    });

    //=============================================时间选框================================================
    layui.use('laydate', function () {
        var laydate = layui.laydate;

        //执行一个laydate实例
        laydate.render({
            elem: '#LAY-component-form-group-date' //指定元素
            , type: 'datetime'
        });
        //执行一个laydate实例
        laydate.render({
            elem: '#LAY-end-component-form-group-date' //指定元素
            , type: 'datetime'
        });
    });
    //上传组件
    layui.use('upload', function () {
        var $ = layui.$
            , form = layui.form
        ;
        var upload = layui.upload;

        //执行实例
        var uploadInst = upload.render({
            elem: '#upload_wap_img' //绑定元素
            , url: up_url //上传接口
            , before: function (obj) { //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
                layer.load(1); //上传loading
            }
            , done: function (res) {
                if (res.error == 0) {
                    var src = res.data.src;
                    $("#upload_wap_img_val").val(src);
                } else {
                    layer.msg(res.msg);
                }
                //上传完毕回调
                layer.closeAll('loading'); //关闭loading
            }
            , error: function () {
                //请求异常回调
                layer.closeAll('loading'); //关闭loading
            }
        });

    });


    function set_lat_lng(lng,lat){
        $("#longitude").val(lng);
        $("#latitude").val(lat);
    }

</script>
@stop